<template>
  <div class="container">
    <div
      class="manualInput text-overflow"
      v-if="showManulInput"
      @click="manualInputEmail(value)"
    >
      <span class="email">{{ value }}</span>
    </div>

    <van-list
      ref="vanList"
      v-model="loading"
      :finished="finished"
      :immediate-check="false"
      :finished-text="finishedText"
      :loading-text="$lang.loading"
      v-if="peopleArr.length"
      @load="onLoad"
      class="person-list-wraper"
    >
      <ul v-for="person in peopleArr" :key="person.id">
        <li @click="choosePerson(person)">
          <div class="name-org">
            <p class="name" v-html="person._hightLightName"></p>
            <p class="org">{{ person._org }}</p>
          </div>
          <span class="email">{{ person.email || $lang.hasNoEmail }}</span>
        </li>
      </ul>
    </van-list>
  </div>
</template>

<script>
export default {
  name: "FilterPeople",
  props: {
    value: {
      type: String,
    },
    mailTmpKey: {
      type: String,
    },
  },
  data() {
    return {
      loading: false,
      finished: false,
      finishedText: this.$lang.noMore,
      peopleArr: [],
      pageInfo: {
        begin: 0, //begin = pageIndex * count , pageIndex从0开始
        count: 10,
      },
    };
  },
  watch: {
    value(newV) {
      if (newV.length > 0) {
        this.peopleArr = [];
        this.pageInfo.begin = 0;
        this.searchPeople();
      } else {
        this.peopleArr = [];
      }
    },
  },
  computed: {
    showManulInput() {
      const flag = this.isChinese(this.value);
      return !flag;
    },
  },
  methods: {
    //判断手动输入的是否为中文
    isChinese(str) {
      const re = new RegExp(/[^\u4E00-\u9FA5]/);
      if (re.test(str)) return false;
      return true;
    },
    manualInputEmail(email) {
      this.$emit("setChosenEmail", this.mailTmpKey, email);
    },
    choosePerson(item) {
      if (!item.email) {
        this.$toast.fail(this.$lang.hasNoEmail);
        return;
      } else {
        this.$emit("setChosenEmail", this.mailTmpKey, item.email, item.name);
      }
    },
    pageIncrease() {
      const { begin, count } = this.pageInfo;
      this.pageInfo.begin = begin + count;
    },

    async onLoad() {
      console.warn("onload----");
      if (this.finished) {
        return;
      }
      // this.pageInfo.begin++;
      this.pageIncrease();
      this.loading = true;
      try {
        const res = await this.searchPeople();
        if (!res) {
          // this.pageInfo.begin--;
        }
      } catch {
        this.loading = false;
        // this.pageInfo.begin--;
      }
    },
    async searchPeople(type = "addition") {
      try {
        const requestBody = {
          word: this.value,
          ...this.pageInfo,
        };
        const res = await this.Api.searchPeople(requestBody);
        const { success, data } = res?.data;
        if (success) {
          // console.warn("筛选人员");
          // console.warn(data);
          const list = data?.list.map((item) => {
            const firstSlashIdx =
              parseInt(item.department.match("/")?.index) + 1;
            if (firstSlashIdx > -1) {
              item["_org"] = item.department.substring(firstSlashIdx);
            }
            item["_hightLightName"] = item.name;
            return item;
          });

          if (list.length > 0) {
            this.peopleArr = this.peopleArr.concat(list);
            // this.SAVESEARCHPEOPLELIST(this.peopleArr)
            this.highLight();
          } else {
            //如果返回的list长度为0
            if (this.pageInfo.begin == 0) {
              this.peopleArr = [];
            }
          }
          this.loading = false;
          this.finished = !data.more;
          this.$toast.clear()
          console.warn("finished", this.finished);
          return true;
        }
      } catch {
        console.error("筛选人员错误");
      }
    },
    highLight() {
      let list = this.peopleArr;
      let regList = [
        {
          reg: "<",
          text: "&lt;",
          dot: "g",
        },
        {
          reg: ">",
          text: "&gt;",
          dot: "g",
        },
        {
          reg: this.value,
          text: '<span style="color: #00c00e;">$&</span>',
          dot: "gi",
        },
      ];
      list.map((j) => {
        regList.map((i) => {
          const regArr = [];
          i.reg &&
            i.reg.split(" ").map((item) => {
              item && regArr.push(`(${item})`);
            });
          let regStr = regArr.join("|");
          let reg = new RegExp(regStr, i.dot);
          j._hightLightName = (j.name || "").replace(reg, i.text);
        });
      });
    },
  },
  created() {
    this.searchPeople();
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  overflow-y: auto;
  background-color: #fff;
  // height: calc(100% - 66px);
  height: 100%;
  min-height: 40vh;
  padding-bottom: 100px;
  // border-bottom: 1px solid #f2f3f5;
  // margin-top: 72px;
  .manualInput {
    width: 100%;
    height: 1.7600024999964rem;
    padding: 0.400000568181rem 0.4266672727264rem;
    .email {
      font-size: 0.4266672727264rem;
    }
  }

  li {
    width: 100%;
    height: 1.7600024999964rem;
    padding: 0.400000568181rem 0.4266672727264rem;

    .name-org {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.2133336363632rem;
      .name {
        font-size: 0.4266672727264rem;
        line-height: 0.4266672727264rem;
        color: #323233;
      }
      .org {
        font-size: 0.3200004545448rem;
        color: #969799;
      }
    }
    .email {
      font-size: 0.3200004545448rem;
      color: #969799;
    }
  }
}
</style>
